<template>
  <fks-dialog
    :append-to-body="true"
    :visible="true"
    width="960px"
    @close="close"
  >
    <div slot="title">
      <i class="fks-icon-edit" />
      {{ title }}
    </div>
    <fks-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <fks-form-item
        :span="12"
        :label="LANG.CLIENT_NAME"
        prop="clientName"
      >
        <fks-input
          v-model="form.clientName"
          readonly
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        :label="LANG.CLIENT_STATE"
        prop="ignoreCheckState"
      >
        <fks-switch v-model="form.ignoreCheckState" />
      </fks-form-item>
      <fks-form-item
        :span="24"
        :label="LANG.CLIENT_ID"
        prop="clientId"
      >
        <span slot="label">
          <span>{{ LANG.CLIENT_ID }}</span>
          <fks-tooltip>
            <div
              slot="content"
              class="tips-container"
            >
              {{ LANG.CLIENT_ID_TIP }}
            </div>
            <i class="fks-icon-question" />
          </fks-tooltip>
        </span>
        <fks-input
          v-model="form.clientId"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        :span="24"
        lead
        :label="LANG.CLIENT_SECRET"
        prop="clientSecret"
      >
        <span slot="label">
          <span>{{ LANG.CLIENT_SECRET }}</span>
          <fks-tooltip>
            <div
              slot="content"
              class="tips-container"
            >
              {{ LANG.CLIENT_SECRET_TIP }}
            </div>
            <i class="fks-icon-question" />
          </fks-tooltip>
        </span>
        <fks-input
          v-model="form.clientSecret"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        :span="24"
        :label="LANG.REDIRECT_URL"
        prop="redirectUri"
      >
        <span slot="label">
          <span>{{ LANG.REDIRECT_URL }}</span>
          <fks-tooltip>
            <div
              slot="content"
              class="tips-container"
            >
              {{ LANG.REDIRECT_URL_TIP }}
            </div>
            <i class="fks-icon-question" />
          </fks-tooltip>
        </span>
        <fks-input
          v-model="form.redirectUri"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        v-if="id == 'ALIPAY'"
        :span="24"
        :label="LANG.ALIPAYPUBLICKEY"
        prop="alipayPublicKey"
      >
        <fks-input
          v-model="form.alipayPublicKey"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>

      <fks-form-item
        v-if="id == 'CODING'"
        :span="24"
        :label="LANG.CODEING_GROUP_NAME"
        prop="codingCroupName"
      >
        <fks-input
          v-model="form.codingCroupName"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        v-if="id == 'WECHAT_ENTERPRISE'"
        :span="24"
        :label="LANG.AGENTID"
        prop="agentId"
      >
        <span slot="label">
          <span>{{ LANG.AGENTID }}</span>
          <fks-tooltip>
            <div
              slot="content"
              class="tips-container"
            >
              {{ LANG.AGENTID_TIP }}
            </div>
            <i class="fks-icon-question" />
          </fks-tooltip>
        </span>
        <fks-input
          v-model="form.agentId"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        v-if="id == 'STACK_OVERFLOW'"
        :span="24"
        :label="LANG.STACK_OVER_FLOWKEY"
        prop="stackOverflowKey"
      >
        <fks-input
          v-model="form.stackOverflowKey"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>

      <fks-form-item
        :span="12"
        :label="LANG.OPENSTATE"
        prop="enableProxy"
      >
        <span slot="label">
          <span>{{ LANG.OPENSTATE }}</span>
          <fks-tooltip>
            <div
              slot="content"
              class="tips-container"
            >
              {{ LANG.OPENSTATE_TIP }}
            </div>
            <i class="fks-icon-question" />
          </fks-tooltip>
        </span>
        <fks-switch v-model="form.enableProxy" />
      </fks-form-item>
      <fks-form-item
        v-if="form.enableProxy"
        :span="12"
        :label="LANG.PORXY_PORT"
        prop="proxyPort"
      >
        <fks-input
          v-model="form.proxyPort"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        v-if="form.enableProxy"
        :span="24"
        :label="LANG.PROXY_ADDR"
        prop="proxyAddr"
      >
        <fks-input
          v-model="form.proxyAddr"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        v-if="id == 'QQ'"
        :span="24"
        :label="LANG.UNIONID"
        prop="unionId"
      >
        <span slot="label">
          <span>{{ LANG.UNIONID }}</span>
          <fks-tooltip>
            <div
              slot="content"
              class="tips-container"
            >
              {{ LANG.UNIONID_TIP }}
            </div>
            <i class="fks-icon-question" />
          </fks-tooltip>
        </span>
        <fks-switch v-model="form.unionId" />
      </fks-form-item>
    </fks-form>
    <template slot="footer">
      <fks-button
        type="primary"
        icon-class="submit"
        icon="fks-icon-check"
        :loading="extraLoading"
        @click="submit"
      >
        {{ LANG.SAVE }}
      </fks-button>
    </template>
  </fks-dialog>
</template>
<script>
import { editExtraData, addExtraData } from './api'
import Mix from '@/mixins/module'
export default {
  name: 'ExtraWay',
  mixins: [Mix],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default() {
        return {
          clientName: ''
        }
      }
    },
    extraType: {
      type: String,
      default: 'edit'
    },
    extraWays: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      extraData: [],
      form: {},
      id: '',
      extraLoading: false
    }
  },
  computed: {
    title() {
      switch (this.extraType) {
        case 'add':
          return this.LANG.ADD
        case 'edit':
          return this.LANG.EDIT
        default:
          return this.LANG.EDIT
      }
    },
    extraWay() {
      return this.$store.state.enum.thirdParty
    },
    rules() {
      return {
        clientName: [
          {
            required: true,
            message: this.LANG.CLIENT_NAME_TIP,
            trigger: 'change'
          }
        ],
        clientId: [
          {
            required: true,
            message: this.LANG.CANNOT_BE_EMPTY,
            trigger: ['blur']
          }
        ],
        clientSecret: [
          {
            required: true,
            message: this.LANG.CANNOT_BE_EMPTY,
            trigger: ['blur']
          }
        ],
        redirectUri: [
          {
            required: true,
            message: this.LANG.CANNOT_BE_EMPTY,
            trigger: ['blur']
          }
        ],
        alipayPublicKey: [
          {
            required: true,
            message: this.LANG.CANNOT_BE_EMPTY,
            trigger: ['blur']
          }
        ],
        enable: [
          {
            required: true,
            message: this.LANG.CANNOT_BE_EMPTY,
            trigger: ['blur']
          }
        ],
        stackOverflowKey: [
          {
            required: true,
            message: this.LANG.CANNOT_BE_EMPTY,
            trigger: ['blur']
          }
        ],
        agentId: [
          {
            required: true,
            message: this.LANG.CANNOT_BE_EMPTY,
            trigger: ['blur']
          }
        ],
        codingCroupName: [
          {
            required: true,
            message: this.LANG.CANNOT_BE_EMPTY,
            trigger: ['blur']
          }
        ]
      }
    }
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(val) {
        this.form = JSON.parse(JSON.stringify(val))
        this.id = val.source
      }
    }
  },
  methods: {
    //关闭第三方应用信息弹窗
    close() {
      this.$emit('update:visible', false)
    },
    changeExtra(val) {
      this.id = val
    },
    //保存第三方应用数据
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.extraLoading = true
          this.extraWay.forEach((item) => {
            if (item[this.$lang] == this.form.clientName) {
              this.form.source = item.code
            }
          })
          let params = JSON.parse(JSON.stringify(this.form))
          if (this.extraType == 'edit') {
            if (!this.form.enableProxy) {
              Object.assign(params, { proxyAddr: '', proxyPort: '' })
            }
            editExtraData(params)
              .then((res) => {
                if (res.status) {
                  this.$message.success(this.LANG.EDIT_SUCCESS)
                  this.$parent.getExtraData()
                  this.close()
                }
                this.extraLoading = false
              })
              .catch((error) => {
                this.extraLoading = false
              })
          } else {
            addExtraData(params)
              .then((res) => {
                if (res.status) {
                  this.$parent.getExtraData()
                  this.$message.success(this.LANG.ADD_SUCCESS)
                  this.close()
                }
                this.extraLoading = false
              })
              .catch((error) => {
                this.extraLoading = false
              })
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .fks-dialog__body {
  padding: 24px 32px 0 !important;
}

.tips-container {
  font-size: 14px;
  line-height: 20px;
}
</style>
